<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        input {
            width: 200px;
        }

        .circle {
            width: 200px;
            height: 400px;
            border: 1px solid;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container"><input type="text"></div>

    <div class="circle"></div>
    <script src="jquery3.5.min.js"></script>
    <script>

        let inputEle = document.querySelector('input');
        let circleEle = document.querySelector('.circle')

        function addcontainer() {
            document.addEventListener('mousedown', (e) => {
                // console.log(e);
                console.log('e.target: ', e.target);
                if (!(circleEle.contains(e.target))) {
                    circleEle.innerHTML = '';
                    circleEle.style.display = 'none';
                }
            })
        }
        addcontainer()

        inputEle.onkeyup = (e) => {
            let value = inputEle.value;
            console.log(value);
            $.ajax({
                type: 'get',
                url: 'http://localhost:3000/keyword',
                data: { keyword: value },
                success: function (result) {
                    if (result.length > 0) {
                        console.log(result);
                        let htmlArray = result.map((item) => {
                            return `<div>${item}</div>`
                        })
                        // console.log(htmlArray);
                        circleEle.innerHTML = htmlArray.join('')
                        // console.log( htmlArray.join(''));
                        circleEle.style.display = 'block';
                    } else {
                        circleEle.innerHTML = '';
                        circleEle.style.display = 'none';
                    }
                }
            })
        }
    </script>
</body>

</html>